<template>
	<!--	<picker mode="multiSelector"-->
	<!--	        :value="multiIndex"-->
	<!--	        :range="multiArray"-->
	<!--	        @change="handleValueChange"-->
	<!--	        @columnchange="handleColumnChange">-->
	<!--		<slot></slot>-->
	<!--	</picker>-->
	<picker
		mode="multiSelector"
		@columnchange="bindMultiPickerColumnChange"
		:value="multiIndex"
		range-key="regionName"
		:range="multiArray"
	>
		{{ multiStr }}
	</picker>
</template>

<script>
/* eslint-disable */
import { provinceList } from '@/api/basic';
export default {
	props: {
		// defaultRegions: {
		//     type: Array,
		// }
		defaultLevel: {
			type: Number,
			default: 3
		},
		addressData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			multiArray: [],
			multiIndex: [0, 0, 0],
			multiStr: ''
		};
	},
	mounted() {
		this.$mHelper.log(this.addressData);
		this.getProvinceList();
	},
	methods: {
		async getProvinceList() {
			let provinceIndex = 0;
			let cityIndex = 0;
			let areaIndex = 0;
			let province_name = null;
			let city_name = null;
			let area_name = null;
			await this.$http.get(`${provinceList}`).then(async r => {
				//console.log("省: " + JSON.stringify(r.data));
				this.multiArray[0] = r.data;
				//console.log("this.addressData: " + JSON.stringify(this.addressData));
				if (this.addressData.provinceIds) {
					r.data.forEach((item, index) => {
						if (
							item.regionId ==
							this.addressData.provinceIds
						) {
							
							provinceIndex = index;
							this.addressData.provinceIds = item.regionId;
							province_name = item.regionName;
							
						}
					});
				} else {
					this.addressData.provinceIds = this.multiArray[0][0].regionId;
					province_name = this.multiArray[0][0].regionName;
				}
				await this.$http
					.get(`${provinceList}`, {
						pid:  this.multiArray[0][provinceIndex].regionId //this.addressData.provinceIds
					})
					.then(async r => {
						this.multiArray[1] = r.data;
						if (this.addressData.cityIds) {
							r.data.forEach((item, index) => {
								if (
									item.regionId ==
									this.addressData.cityIds
								) {
									cityIndex = index;
									this.addressData.cityIds = item.regionId;
									city_name = item.regionName;
								}
							});
						} else {
							this.addressData.cityIds = this.multiArray[1][0].regionId;
							city_name = this.multiArray[1][0].regionName;
						}
						await this.$http
							.get(`${provinceList}`, {
								pid: this.multiArray[1][cityIndex].regionId //this.addressData.cityIds
							})
							.then(r => {
								this.multiArray[2] = r.data;
								if (this.addressData.countyIds) {
									r.data.forEach((item, index) => {
										if (
											item.regionId ==
											this.addressData.countyIds
										) {
											areaIndex = index;
											this.addressData.countyIds = item.regionId;
											area_name = item.regionName;
										}
									});
								} else {
									this.addressData.countyIds = this.multiArray[2][0].regionId;
									area_name = this.multiArray[2][0].regionName;
								}
								this.multiIndex = [provinceIndex, cityIndex, areaIndex];
								this.multiStr = `${province_name}, ${city_name}, ${area_name}`;
								this.$emit('getRegions', this.addressData);
							});
					});
			});
		},
		async bindMultiPickerColumnChange(e) {
			this.multiIndex[e.detail.column] = e.detail.value;
			let provinceIndex = 0;
			let cityIndex = 0;
			let areaIndex = 0;
			let province_name = null;
			let city_name = null;
			let area_name = null;
			switch (e.detail.column) {
				case 0: //拖动第1列
					if (this.multiIndex[0] === this.multiIndex[0]) {
            this.addressData.provinceIds = this.multiArray[0][
	            e.detail.value
            ].regionId;
            province_name = this.multiArray[0][e.detail.value].regionName;
            await this.$http
	            .get(`${provinceList}`, {
		            pid: this.multiArray[0][e.detail.value].regionId
	            })
	            .then(async r => {
		            this.multiArray[1] = r.data;
		            this.addressData.cityIds = this.multiArray[1][0].regionId;
		            city_name = this.multiArray[1][0].regionName;
		            provinceIndex = e.detail.value;
		            await this.$http
			            .get(`${provinceList}`, {
				            pid: this.multiArray[1][e.detail.column].regionId
			            })
			            .then(r => {
				            this.multiArray[2] = r.data;
				            this.addressData.countyIds = this.multiArray[2][0].regionId;
				            area_name = this.multiArray[2][0].regionName;
				            this.multiIndex = [provinceIndex, 0, 0];
				            this.multiStr = `${province_name}, ${city_name}, ${area_name}`;
			            });
	            });
          }
					break;
				case 1: //拖动第2列
					if (this.multiIndex[0] === this.multiIndex[0]) {
            if (this.multiIndex[1] === this.multiIndex[1]) {
              this.addressData.provinceIds = this.multiArray[0][
	              this.multiIndex[0]
              ].regionId;
              province_name = this.multiArray[0][this.multiIndex[0]].regionName;
              this.addressData.cityIds = this.multiArray[1][
	              e.detail.value
              ].regionId;
              city_name = this.multiArray[1][e.detail.value].regionName;
              cityIndex = e.detail.value;
              await this.$http
	              .get(`${provinceList}`, {
		              pid: this.multiArray[1][e.detail.value].regionId
	              })
	              .then(r => {
		              this.multiArray[2] = r.data;
		              this.addressData.countyIds = this.multiArray[2][0].regionId;
		              area_name = this.multiArray[2][0].regionName;
		              this.multiIndex = [this.multiIndex[0], cityIndex, 0];
		              this.multiStr = `${province_name}, ${city_name}, ${area_name}`;
	              });
            }
          }
					break;
				case 2: //拖动第3列
					if (this.multiIndex[0] === this.multiIndex[0]) {
            if (this.multiIndex[1] === this.multiIndex[1]) {
              if (this.multiIndex[2] === this.multiIndex[2]) {
                this.addressData.provinceIds = this.multiArray[0][
	                this.multiIndex[0]
                ].regionId;
                province_name = this.multiArray[0][this.multiIndex[0]]
	                .regionName;
                this.addressData.cityIds = this.multiArray[1][
	                this.multiIndex[1]
                ].regionId;
                city_name = this.multiArray[1][this.multiIndex[1]].regionName;
                this.addressData.countyIds = this.multiArray[2][
	                e.detail.value
                ].regionId;
                area_name = this.multiArray[2][e.detail.value].regionName;
                areaIndex = e.detail.value;
                this.multiIndex = [
	                this.multiIndex[0],
	                this.multiIndex[1],
	                areaIndex
                ];
                this.multiStr = `${province_name}, ${city_name}, ${area_name}`;
              }
            }
          }
					break;
			}
			this.$emit('getRegions', this.addressData);
		}
	}
};
</script>
